<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta name="description" content="" />
    <link th:href="@{/mb/css/bootstrap.min.css}" rel="stylesheet" type="text/css">
    <link th:href="@{/mb/css/css.css}" rel="stylesheet" type="text/css">
    <link th:href="@{/mb/css/Animation.css}" rel="stylesheet" type="text/css">
    <link th:href="@{/mb/css/slider.css}" rel="stylesheet" type="text/css">
    <link rel="stylesheet" type="text/css" th:href="@{/mb/css/normalize.css}" />
    <link rel="stylesheet" th:href="@{/mb/css/style-button.css}">
    <link rel="stylesheet" th:href="@{/mb/css/layer.css}">
    <title>注册使用</title>

<style>
    .name span{
        color: red;}
</style>
</head>

<body>

<!--头开始-->
<header class="navbar-fixed-top headerbg">
    <div class="logo"><a href="http://www.baidu.com" th:href="@{/mc/}" class="fl mt10">
        <img th:src="@{/mb/images/mclogo.png}" alt="" style="margin-top: -30px;margin-left: 30px"></a></div>
    <div class="navBox hidden-xs hidden-sm"  style="float: right;margin-right: 10%">
        <ul class="navList list-unstyled">
            <li class="navLi"><h3><a href="http://www.baidu.com" th:href="@{/mc/}" ><span>首页</span></a></h3></li>
            <li class="navLi"><h3><a href="http://www.baidu.com" th:href="@{/mc/item/itemsList}"><span>项目</span></a></h3></li>
            <li class="navLi"><h3><a href="javascript:click()" ><span>帮助</span></a></h3></li>
            <li class="navLi"><h3><a href="http://www.baidu.com"  th:href="@{/mc/login}"><span>登录</span></a></h3></li>
            <li class="navLi  on"><h3><a href="http://www.baidu.com" th:href="@{/mc/register}"><span>注册</span></a></h3></li>
            <li class="navLi" style="overflow: hidden;display: none"><h3><a href="javascript:click()"><img th:src="@{/images/center.png}" height="60px" width="60px"></a></h3></li>
        </ul >
    </div>
</header>

<!--动态线条结尾-->

<!--图片-->
<div class="bannerN animated">
    <div class="imgFull"><img th:src="@{/mb/images/p_bg_02.jpg}" class="img-responsive"></div>
    <h2 class="banH2 wow fadeInUp">注册使用</h2>
    <h3 class="wow fadeInUp">为您提供全套软件开发服务</h3>
    <div class="sky">
        <div class="clouds_one"></div>
        <div class="clouds_two"></div>
        <div class="clouds_three"></div>
    </div>
</div>

<!--注册试用样式-->
<div class="container">
    <div class="mtb50 Register_style">
        <div class="tryout_style clearfix">
            <form id="register" class="try_content" enctype="multipart/form-data" th:action="@{/mc/logged/enroll}" method="post">
                <div class="name">
                    <label  class="label_name">昵称:</label><input style="" id="nickname" name="nickName" type="text" onblur="nickname()" class="add_name text"  placeholder="请输入您的个性化昵称" value=""><span id="error-nickname"></span>
                </div>
                <div class="name">
                    <label class="label_name">账号:</label><input style="" id="username" name="username" type="text"  class="text add_qq" onblur="username()" placeholder="请输入您用于网站登录的账号" value="" ><span id="error-username"></span>
                </div>
                <div class="name">
                    <label class="label_name">密码:</label><input style="" id="password" name="password" type="password"  class="text width500" onblur="password()" oninput="password()" placeholder="密码不得小于6位且区分大小写" value="" ><span id="error-pwd"></span>
                </div>
                <div class="name">
                    <label class="label_name">确认密码:</label><input style="" id="password2" name="password2" type="password" class="text width500" onblur="checkPwd()" oninput="checkPwd()"  placeholder="请再次输入密码" value="" ><span id="error-checkPwd"></span>
                </div>
                <div class="name">
                    <label class="label_name">姓名:</label><input style="" id="name" name="name" type="text" class="text width500" onblur="realname()" placeholder="请输入您的真实姓名" value="" ><span id="error-name2"></span>
                </div>

                <div class="name">
                    <label class="label_name">&nbsp;身份证号:</label><input style="" id="idCard" name="idCard" class="text width500" oninput="checkIdcard()" th:placeholder="请输入您的身份证号" type="" placeholder="" value="" ><span id="error-card"></span>

                    &nbsp;&nbsp;&nbsp;&nbsp;

                </div>
                <div class="name">
                    <label class="label_name">注册成为:</label>
                    <div style="line-height: 42px;width: 100%;height: 20px;">
                        <input type="radio" class="blue" name="Type" id="" value="1" checked="checked"/>需求方
                        <input type="radio" class="blue" name="Type" id="Type" value="2" />开发方
                    </div>
                </div>

                <div class="name clearfix">
                    <input type="button" onclick="registerUser()" class="btn_submit btn"  value=" 注册">
                </div>
            </form>
        </div>

    </div>
</div>


<!--底部样式-->
<footer class="footerBg">
    <div class="container"><span class="footer_logo"><img th:src="@{/mb/images/mclogo.png}"></span><span class="CopyRight_name">码虫互联网服务外包平台 </span></div>
</footer>


<script th:src="@{/mb/js/jquery-3.3.1.min.js}" type="text/javascript"></script>
<script th:src="@{/mb/js/jquery.js}" type="text/javascript"></script>
<script th:src="@{/mb/js/common.js}" type="text/javascript"></script>
<script th:src="@{/mb/js/slider.js}" type="text/javascript"></script>
<script th:src="@{/mb/js/html5.js}" type="text/javascript"></script>
<script th:src="@{/mb/js/jquery.SuperSlide.2.1.1.js}" type="text/javascript"></script>
<script th:src="@{/mb/js/bootstrap.min.js}" type="text/javascript"></script>
<script th:src="@{/mb/js/layer.js}"></script>


<script type="text/javascript">
    function click() {
        alert("请先登录!");
        window.location.href="/code/mc/login";
    }
    function nickname() {
        var nickname=document.getElementById("nickname").value;

        var error=document.getElementById("error-nickname");
        if(nickname !="" && nickname !=null){
            error.innerHTML="";
            return true;
        }
        error.innerHTML="请输入您的昵称!";
        return false;
    }

    function username() {
        var username=document.getElementById("username").value;
        var error=document.getElementById("error-username");
        if(username !="" && username !=null){
            error.innerHTML="";
            return true;
        }
        error.innerHTML="请输入您的账号!";
        return false;
    }
    function realname() {
        var realname=document.getElementById("name").value;
        var error=document.getElementById("error-name2");
        if(realname!="" && realname !=null){
            error.innerHTML="";
            return true;
        }
        error.innerHTML="请输入您的姓名!";
        return false;
    }


    function password() {
        var password1=document.getElementById("password").value;
        var error=document.getElementById("error-pwd");
        if(password1.length>=6){
            error.innerHTML="";
            return true;
        }
        error.innerHTML="密码强度不得小于6位!";
        return false;
    }
    function checkPwd() {
        var password1=document.getElementById("password").value;
        var password2=document.getElementById("password2").value;
        var error1=document.getElementById("error-pwd");
        var error2=document.getElementById("error-checkPwd");
        if(password1 != "" && password1 != null) {
            if (password2 != "" && password2 != null) {
                if (password1 == password2) {
                    error2.innerHTML = "";
                    return true;
                }
                error2.innerHTML = "两次密码不相同!";
                return false;
            }

        }
        error1.innerHTML = "请输入密码!";
        return false;
    }

    function checkIdcard() {
        var card=document.getElementById("idCard").value;
        var error=document.getElementById("error-card");
        var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
        if (card!="" && card!=null){
            if (reg.test(card) == true) {
                error.innerHTML="";
                return true;
            }
            error.innerHTML="身份证号错误!请重试!";
            return false;

        }
        error.innerHTML="请输入身份证号!";
        return false;
    }
    function registerUser() {
        if(password()&&checkPwd()&&checkIdcard()&&realname()&&nickname()&&username()){
            $("#register").submit();
            return false;
        }
        layer.msg('存在错误,无法注册!',function () {
        });
    }
</script>



</div>






</body>
</html>
